export default {
basic_examples: `<template>
  <view class="dev-svg-box"
    :style="[{ 'width':width==='100%'?'100%':width+'rpx','border-radius':\`\${radius}rpx\`,'height':height+'rpx','background-color':openDebug?'#007AFF':''},pictureStyle,{'display':'flex'}]">
    <image :src="displayAddress"
      :style="[{ 'width':width==='100%'?'100%':width+'rpx','height':height+'rpx','border-radius':\`\${radius}rpx\`},pictureStyle]">
    </image>
    <!-- 数字 -->
    <view
      :style="{'width':numWidth+'rpx','height':numHeight+'rpx','line-height':\`\${numHeight}rpx\`,'border-radius':\`\${numRadius}rpx\`,'font-size':\`$\{fontSize}rpx\`,'color':numColor,'background':numBgColor,'top':numTop===''?'none':numTop+'rpx','left':numLeft===''?'none':numLeft+'rpx','right':numRight===''?'none':numRight+'rpx','bottom':numBottom===''?'none':numBottom+'rpx'}"
      class="dev-number" v-if="isNum">
      <slot name="custom">
        {{checkDigit}}
      </slot>
    </view>
  </view>
</template>

<script>
  /******************************************* 娄渊洋
   * 列表布局
   * @property {String} 'mode' 当前使用什么模式 svg image
   * @property {String} 'svg-code' svg代码
   * @property {String} 'initial-color' svg代码初始颜色 不传值则默认使用 代码颜色,如需修改颜色,此值为必传值
   * @property {String} 'modify-color' 修改后的颜色
   * @property {String,Number} 'width' 图片宽度 默认宽度为40rpx
   * @property {String,Number} 'height' 图片高度 默认高度为40rpx
   * @property {String} 'image-url' 不使用svg的情况下,自定义图片地址
   * @property {Object} 'picture-style' 不使用svg的情况下,自定义图片样式
   * @property {String} 'svg-name' 当为svg模式时可直接使用以封存的svg
   * @property {Boolean} 'open-debug' 是否打开调试 打开调试出现背景颜色
   * @property {Boolean} 'is-num' 是否显示消息数
   * @property {String,Number} 'max-num' 消息数字最大值
   * @property {String,Number} 'number' 消息数字值
   * @property {String,Number} 'num-width' 消息框宽度
   * @property {String,Number} 'num-height' 消息框高度
   * @property {String,Number} 'num-radius' 消息框圆角
   * @property {String,Number} 'font-size' 消息文字大小
   * @property {String} 'num-color' 消息文字颜色
   * @property {String} 'num-bg-color' 消息框背景颜色
   * @property {String,Number} 'num-top' 消息框距离图片顶部距离
   * @property {String,Number} 'num-right' 消息框距离图片右边距离
   * @property {String,Number} 'num-left' 消息框距离图片左边距离
   * @property {String,Number} 'num-bottom' 消息框距离图片底部距离
   * @property {String} 'default-img-url' 图片默认域名地址
   */
  import svgData from './svg.js'
  import base64 from './base64.js'
  export default {
    name: "dev-svg-image",
    props: {
      //svg代码
      svgCode: {
        type: String,
        default: ''
      },
      //初始颜色
      initialColor: {
        type: String,
        default: ''
      },
      //圆角
      radius: {
        type: [String, Number],
        default: 0
      },
      //修改后颜色
      modifyColor: {
        type: String,
        default: ''
      },
      //图片的高度
      width: {
        type: [String, Number],
        default: '40'
      },
      //图片的高度
      height: {
        type: [String, Number],
        default: '40'
      },
      //image地址
      imageUrl: {
        type: String,
        default: ''
      },
      //自定义图片的样式
      pictureStyle: {
        type: Object,
        default () {
          return {

          };
        }
      },
      //当前使用 svg 模式还是 image 模式
      mode: {
        type: String,
        default: 'svg' //svg  image
      },
      //使用已经 封装的svg 图片 名称
      svgName: {
        type: String,
        default: 'rightArrow' //rightArrow
      },
      //是否打开调试
      openDebug: {
        type: Boolean,
        default: false
      },
      //是否显示消息数
      isNum: {
        type: Boolean,
        default: false
      },
      //消息数字值
      number: {
        type: [String, Number],
        default: 0
      },
      //消息数字最大值
      maxNum: {
        type: [String, Number],
        default: 99
      },
      //消息框宽度
      numWidth: {
        type: [String, Number],
        default: 36
      },
      //消息框高度
      numHeight: {
        type: [String, Number],
        default: 36
      },
      //消息框圆角
      numRadius: {
        type: [String, Number],
        default: 18
      },
      //消息文字大小
      fontSize: {
        type: [String, Number],
        default: 12
      },
      //消息文字颜色
      numColor: {
        type: String,
        default: '#FFFFFF'
      },
      //消息框背景颜色
      numBgColor: {
        type: String,
        default: '#FF333A'
      },
      //消息框距离顶部距离
      numTop: {
        type: [String, Number],
        default: -10
      },
      //消息框距离右边距离
      numRight: {
        type: [String, Number],
        default: -12
      },
      //消息框距离左边距离
      numLeft: {
        type: [String, Number],
        default: ''
      },
      //消息框距离底部距离
      numBottom: {
        type: [String, Number],
        default: ''
      },
      //图片默认地址头
      defaultImgUrl:{
        type: String,
        default: 'http://static.bsyjk.cn/'
      }

    },
    data() {
      return {

      };
    },
    computed: {
      //计算数字
      checkDigit() {
        if (this.number > this.maxNum) {
          return \`\${this.maxNum}+\`
        } else {
          return this.number
        }
      },
      // 计算url数据
      displayAddress: function() {
        let _this = this;
        if (this.mode == 'svg') {
          if (this.svgName) {
            if (_this.modifyColor) {
              let regulars = new RegExp(svgData[this.svgName].initialColor, 'g');
              return 'data:image/svg+xml;base64,' + base64.encode(svgData[this.svgName].svgCode.replace(
                regulars, this
                .modifyColor))
            } else {
              return 'data:image/svg+xml;base64,' + base64.encode(svgData[this.svgName].svgCode);
            }
          } else {
            if (this.svgCode) {
              if (this.initialColor && this.modifyColor) {
                let regulars = new RegExp(this.initialColor, 'g');
                return 'data:image/svg+xml;base64,' + base64.encode(this.svgCode.replace(regulars, this
                  .modifyColor))
              } else {
                return 'data:image/svg+xml;base64,' + base64.encode(this.svgCode);
              }
            }
          }
        } else {
          return this.imgUrl(this.imageUrl)
        }

      }
    },
    methods: {
      //计算url地址
      imgUrl(src) {
        src = src || ''
        return src.indexOf('http://') != -1 || src.indexOf('https://') != -1 ?
          src :
          this.defaultImgUrl + src;
      },
    }
  }
</script>

<style lang="scss">
  .dev-svg-box {
    position: relative;

    .dev-number {
      position: absolute;
      text-align: center;
    }
  }
</style>
`,
base64:`/*! https://mths.be/base64 v1.0.0 by @mathias | MIT license */
;(function(root) {

	// Detect free variables exports.
	var freeExports = typeof exports == 'object' && exports;

	// Detect free variable module.
	var freeModule = typeof module == 'object' && module &&
		module.exports == freeExports && module;

	// Detect free variable global, from Node.js or Browserified code, and use
	// it as root.
	var freeGlobal = typeof global == 'object' && global;
	if (freeGlobal.global === freeGlobal || freeGlobal.window === freeGlobal) {
		root = freeGlobal;
	}

	/*--------------------------------------------------------------------------*/

	var InvalidCharacterError = function(message) {
		this.message = message;
	};
	InvalidCharacterError.prototype = new Error;
	InvalidCharacterError.prototype.name = 'InvalidCharacterError';

	var error = function(message) {
		// Note: the error messages used throughout this file match those used by
		// the native atob/btoa implementation in Chromium.
		throw new InvalidCharacterError(message);
	};

	var TABLE = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
	// http://whatwg.org/html/common-microsyntaxes.html#space-character
	var REGEX_SPACE_CHARACTERS = /[\t\n\f\r ]/g;

	// decode is designed to be fully compatible with atob as described in the
	// HTML Standard. http://whatwg.org/html/webappapis.html#dom-windowbase64-atob
	// The optimized base64-decoding algorithm used is based on @atk’s excellent
	// implementation. https://gist.github.com/atk/1020396
	var decode = function(input) {
		input = String(input)
			.replace(REGEX_SPACE_CHARACTERS, '');
		var length = input.length;
		if (length % 4 == 0) {
			input = input.replace(/==?$/, '');
			length = input.length;
		}
		if (
			length % 4 == 1 ||
			// http://whatwg.org/C#alphanumeric-ascii-characters
			/[^+a-zA-Z0-9/]/.test(input)
		) {
			error(
				'Invalid character: the string to be decoded is not correctly encoded.'
			);
		}
		var bitCounter = 0;
		var bitStorage;
		var buffer;
		var output = '';
		var position = -1;
		while (++position < length) {
			buffer = TABLE.indexOf(input.charAt(position));
			bitStorage = bitCounter % 4 ? bitStorage * 64 + buffer : buffer;
			// Unless this is the first of a group of 4 characters…
			if (bitCounter++ % 4) {
				// …convert the first 8 bits to a single ASCII character.
				output += String.fromCharCode(
					0xFF & bitStorage >> (-2 * bitCounter & 6)
				);
			}
		}
		return output;
	};

	// encode is designed to be fully compatible with btoa as described in the
	// HTML Standard: http://whatwg.org/html/webappapis.html#dom-windowbase64-btoa
	var encode = function(input) {
		input = String(input);
		if (/[^\0-\xFF]/.test(input)) {
			// Note: no need to special-case astral symbols here, as surrogates are
			// matched, and the input is supposed to only contain ASCII anyway.
			error(
				'The string to be encoded contains characters outside of the ' +
				'Latin1 range.'
			);
		}
		var padding = input.length % 3;
		var output = '';
		var position = -1;
		var a;
		var b;
		var c;
		var buffer;
		// Make sure any padding is handled outside of the loop.
		var length = input.length - padding;

		while (++position < length) {
			// Read three bytes, i.e. 24 bits.
			a = input.charCodeAt(position) << 16;
			b = input.charCodeAt(++position) << 8;
			c = input.charCodeAt(++position);
			buffer = a + b + c;
			// Turn the 24 bits into four chunks of 6 bits each, and append the
			// matching character for each of them to the output.
			output += (
				TABLE.charAt(buffer >> 18 & 0x3F) +
				TABLE.charAt(buffer >> 12 & 0x3F) +
				TABLE.charAt(buffer >> 6 & 0x3F) +
				TABLE.charAt(buffer & 0x3F)
			);
		}

		if (padding == 2) {
			a = input.charCodeAt(position) << 8;
			b = input.charCodeAt(++position);
			buffer = a + b;
			output += (
				TABLE.charAt(buffer >> 10) +
				TABLE.charAt((buffer >> 4) & 0x3F) +
				TABLE.charAt((buffer << 2) & 0x3F) +
				'='
			);
		} else if (padding == 1) {
			buffer = input.charCodeAt(position);
			output += (
				TABLE.charAt(buffer >> 2) +
				TABLE.charAt((buffer << 4) & 0x3F) +
				'=='
			);
		}

		return output;
	};

	var base64 = {
		'encode': encode,
		'decode': decode,
		'version': '1.0.0'
	};

	// Some AMD build optimizers, like r.js, check for specific condition patterns
	// like the following:
	if (
		typeof define == 'function' &&
		typeof define.amd == 'object' &&
		define.amd
	) {
		define(function() {
			return base64;
		});
	}	else if (freeExports && !freeExports.nodeType) {
		if (freeModule) { // in Node.js or RingoJS v0.8.0+
			freeModule.exports = base64;
		} else { // in Narwhal or RingoJS v0.7.0-
			for (var key in base64) {
				base64.hasOwnProperty(key) && (freeExports[key] = base64[key]);
			}
		}
	} else { // in Rhino or a web browser
		root.base64 = base64;
	}

}(this));
`,
svg:`// svg 封装
let svgData = {
  rightArrow: {
    svgCode: '<svg t="1642833835746" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2434" width="200" height="200"><path d="M534.826667 935.466667a47.36 47.36 0 0 1-66.986667-66.773334L835.413333 501.333333 467.84 133.973333a47.36 47.36 0 1 1 66.986667-66.773333l400.64 400.64a47.36 47.36 0 0 1 0 66.986667z" fill="#8a8a8a" p-id="2435"></path></svg>',
    initialColor: '#8a8a8a', //当前svg本身自带的颜色
  },
  listIcon: {
    svgCode: '<svg t="1642848640214" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4180" width="200" height="200"><path d="M187.392 70.656q28.672 0 48.64 19.456t19.968 48.128l0 52.224q0 28.672-19.968 48.64t-48.64 19.968l-54.272 0q-27.648 0-47.616-19.968t-19.968-48.64l0-52.224q0-28.672 19.968-48.128t47.616-19.456l54.272 0zM889.856 70.656q27.648 0 47.616 19.456t19.968 48.128l0 52.224q0 28.672-19.968 48.64t-47.616 19.968l-437.248 0q-28.672 0-48.64-19.968t-19.968-48.64l0-52.224q0-28.672 19.968-48.128t48.64-19.456l437.248 0zM187.392 389.12q28.672 0 48.64 19.968t19.968 48.64l0 52.224q0 27.648-19.968 47.616t-48.64 19.968l-54.272 0q-27.648 0-47.616-19.968t-19.968-47.616l0-52.224q0-28.672 19.968-48.64t47.616-19.968l54.272 0zM889.856 389.12q27.648 0 47.616 19.968t19.968 48.64l0 52.224q0 27.648-19.968 47.616t-47.616 19.968l-437.248 0q-28.672 0-48.64-19.968t-19.968-47.616l0-52.224q0-28.672 19.968-48.64t48.64-19.968l437.248 0zM187.392 708.608q28.672 0 48.64 19.968t19.968 47.616l0 52.224q0 28.672-19.968 48.64t-48.64 19.968l-54.272 0q-27.648 0-47.616-19.968t-19.968-48.64l0-52.224q0-27.648 19.968-47.616t47.616-19.968l54.272 0zM889.856 708.608q27.648 0 47.616 19.968t19.968 47.616l0 52.224q0 28.672-19.968 48.64t-47.616 19.968l-437.248 0q-28.672 0-48.64-19.968t-19.968-48.64l0-52.224q0-27.648 19.968-47.616t48.64-19.968l437.248 0z" p-id="4181" fill="#1296db"></path></svg>',
    initialColor: '#1296db', //当前svg本身自带的颜色
  },
  svgImage:{
    svgCode:'<svg t="1643342497703" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8452" width="200" height="200"><path d="M725.333333 128H298.666667C181.034667 128 85.333333 223.701333 85.333333 341.333333v341.333334c0 117.632 95.701333 213.333333 213.333334 213.333333h426.666666c117.632 0 213.333333-95.701333 213.333334-213.333333V341.333333c0-117.632-95.701333-213.333333-213.333334-213.333333zM298.666667 213.333333h426.666666c70.570667 0 128 57.429333 128 128v195.669334l-152.874666-152.874667a85.632 85.632 0 0 0-120.917334 0L384 579.669333l-24.874667-24.874666a85.632 85.632 0 0 0-120.917333 0L170.666667 622.336V341.333333c0-70.570667 57.429333-128 128-128z m-21.333334 170.666667a64 64 0 1 1 128.042667 0.042667A64 64 0 0 1 277.333333 384z" fill="#40A9FF" p-id="8453"></path><path d="M579.541333 384.128a85.632 85.632 0 0 1 120.917334 0l78.677333 78.677333L345.898667 896H298.666667a213.12 213.12 0 0 1-169.941334-84.48l243.584-243.541333 11.690667 11.690666z m219.52-242.986667a214.058667 214.058667 0 0 1 136.704 165.034667L853.333333 388.522667V341.333333a128.170667 128.170667 0 0 0-120.490666-127.786666l-5.973334-0.170667z" fill="#53B1FF" p-id="8454"></path><path d="M170.666667 467.84v154.453333l67.541333-67.498666a85.632 85.632 0 0 1 120.917333 0l13.141334 13.141333-243.541334 243.541333a212.181333 212.181333 0 0 1-43.178666-119.552L85.333333 682.666667v-129.493334l85.333334-85.333333zM341.333333 320a64 64 0 1 1-0.042666 128.042667A64 64 0 0 1 341.333333 320zM725.333333 128c25.898667 0 50.773333 4.650667 73.728 13.141333L726.826667 213.333333H425.216l85.333333-85.333333z" fill="#66BAFF" p-id="8455"></path><path d="M510.506667 128l-85.333334 85.333333H298.666667a128.170667 128.170667 0 0 0-127.786667 120.490667L170.666667 341.333333v126.506667l-85.333334 85.333333V341.333333a213.589333 213.589333 0 0 1 204.074667-213.12L298.666667 128h211.84z" fill="#8CCBFF" p-id="8456"></path></svg>',
    initialColor: '#8CCBFF', //当前svg本身自带的颜色
  }
}

export default svgData
`,
default_use:`<template>
  <view>
    <dev-svg-image></dev-svg-image>
  </view>
</template>`,
svg_code_use:`<template>
  <view>
    <dev-svg-image mode="svg" :svg-code="svgCode"></dev-svg-image>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        svgCode:'<svg t="1645347205172" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1338" width="200" height="200"><path d="M947.701961 623.435294l-694.713725 0q-11.043137 0-23.090196 6.023529t-22.588235 18.070588-17.066667 28.611765-6.52549 37.647059 5.521569 39.152941 14.556863 32.12549 22.086275 22.086275 28.109804 8.031373l693.709804 0q-12.047059-12.047059-21.082353-27.105882-8.031373-13.05098-14.556863-31.121569t-6.52549-41.160784q0-26.101961 6.52549-43.168627t14.556863-28.109804q9.035294-12.047059 21.082353-21.082353zM947.701961 897.505882q0 17.066667-22.086275 17.066667l-733.866667 0q-34.133333 0-57.223529-14.054902t-37.647059-38.65098-20.580392-58.729412-6.023529-73.286275l0-582.27451q0-77.301961 41.160784-111.937255t117.458824-34.635294l34.133333 0 68.266667 0 93.364706 0q51.2 0 104.909804-0.501961t104.909804-0.501961l94.368627 0 70.27451 0 35.137255 0q28.109804 0 49.192157 11.545098t35.137255 32.12549 21.584314 48.690196 7.529412 60.235294l0 406.588235q-191.74902 0-345.34902-1.003922l-128.501961 0q-64.25098 0-114.94902-0.501961t-83.827451-0.501961l-37.145098 0q-21.082353 0-41.160784 12.54902t-36.141176 34.133333-26.101961 50.196078-10.039216 59.733333q0 38.14902 10.541176 68.768627t27.607843 51.701961 37.647059 32.627451 40.658824 11.545098l685.678431 0q8.031373 0 14.556863 4.517647t6.52549 14.556863zM515.011765 0l0 388.517647 77.301961-108.423529 76.298039 108.423529 0-388.517647-153.6 0z" p-id="1339" fill="#2c2c2c" data-spm-anchor-id="a313x.7781069.0.i1" class="selected"></path></svg>'
      }
    }
  }
</script>`,
svg_name_use:`<template>
  <view>
    <dev-svg-image mode="svg" svg-name="svgImage"></dev-svg-image>
  </view>
</template>`,
svg_name_color:`<template>
  <view>
    <dev-svg-image mode="svg" svg-name="rightArrow" modify-color="#0081FF"></dev-svg-image>
  </view>
</template>`,
svg_code_color:`<template>
  <view>
    <dev-svg-image mode="svg" :svg-code="svgCode" initial-color="#2c2c2c" modify-color="#0081FF"></dev-svg-image>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        svgCode:'<svg t="1645347205172" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1338" width="200" height="200"><path d="M947.701961 623.435294l-694.713725 0q-11.043137 0-23.090196 6.023529t-22.588235 18.070588-17.066667 28.611765-6.52549 37.647059 5.521569 39.152941 14.556863 32.12549 22.086275 22.086275 28.109804 8.031373l693.709804 0q-12.047059-12.047059-21.082353-27.105882-8.031373-13.05098-14.556863-31.121569t-6.52549-41.160784q0-26.101961 6.52549-43.168627t14.556863-28.109804q9.035294-12.047059 21.082353-21.082353zM947.701961 897.505882q0 17.066667-22.086275 17.066667l-733.866667 0q-34.133333 0-57.223529-14.054902t-37.647059-38.65098-20.580392-58.729412-6.023529-73.286275l0-582.27451q0-77.301961 41.160784-111.937255t117.458824-34.635294l34.133333 0 68.266667 0 93.364706 0q51.2 0 104.909804-0.501961t104.909804-0.501961l94.368627 0 70.27451 0 35.137255 0q28.109804 0 49.192157 11.545098t35.137255 32.12549 21.584314 48.690196 7.529412 60.235294l0 406.588235q-191.74902 0-345.34902-1.003922l-128.501961 0q-64.25098 0-114.94902-0.501961t-83.827451-0.501961l-37.145098 0q-21.082353 0-41.160784 12.54902t-36.141176 34.133333-26.101961 50.196078-10.039216 59.733333q0 38.14902 10.541176 68.768627t27.607843 51.701961 37.647059 32.627451 40.658824 11.545098l685.678431 0q8.031373 0 14.556863 4.517647t6.52549 14.556863zM515.011765 0l0 388.517647 77.301961-108.423529 76.298039 108.423529 0-388.517647-153.6 0z" p-id="1339" fill="#2c2c2c" data-spm-anchor-id="a313x.7781069.0.i1" class="selected"></path></svg>'
      }
    }
  }
</script>`


}
